<template>
	<view :style="[{ height: navbarData.gradual ? '0' : navHeight + 'px' }]">
		<view class="topBackground" v-if="navbarData.bgImg" :style="{ height: navHeight + 'px',position:navbarData.posit,backgroundColor:navbarData.bgColor }">
			<image  mode="aspectFill" src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/dsp_background_new.png" />
		</view>
		  
		<view class="navbar" v-if="!isOpacity" :style="{ position: navbarData.posit, height: navHeight + 'px' }">
			<view v-if="navbarData.showCapsule" @tap.stop="_navBack" class="navbar-back">
				<image class="back-img" :class="{back_img:!!navbarData.backIcon}"  mode="aspectFill" :src="`${navbarData.backIcon?navbarData.backIcon:'https://cdn1.visiotrip.com/h5AndMini/2023-10-10/back.png'}`" />
			</view>
			<view v-if="navbarData.showTitle" class="navbar-title" :style="{ top: navTop + 'px', color: navbarData.titleColor }">
				{{ navbarData.title }}
			</view>
			<slot></slot>
			<slot name="right"></slot>
		</view>
		<view v-if="isOpacity">
			<view class="navbar isOpacity" :style="{ position: navbarData.posit, height: navHeight + 'px', backgroundColor:(bgColor? bgColor:'none') }">
				<view v-if="navbarData.showCapsule" @tap.stop="_navBack" class="navbar-back" >
					<image class="back-img"  mode="aspectFill" src="https://cdn1.visiotrip.com/h5AndMini/2023-10-10/back.png" />
				</view>
				<view v-if="navbarData.showTitle" class="navbar-title" :style="{ top: navTop + 'px', color: navbarData.titleColor }">
					{{ navbarData.title }}
				</view>
				<slot></slot>
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
// components/navbar/index.js
const globalData = uni.getStorageSync("globalData");
const dsbridge = require("../../utils/dsbridge");
import { isH5 } from '../../utils/Eplatform';
export default {
	emits:['navBack'],
	data() {
		return {
			navHeight: globalData.navHeight || 40,
			navTop: globalData.navTop || 20,
			imageWidth: '',
			imageHeight: '',
			isOpacity: this.navbarData.isOpacity,
			bgColor: this.navbarData.bgColor,
			backColor: this.navbarData.backColor
		};
	},
	options: {
		addGlobalClass: true
	},
	externalClasses: ['custom-class'],
	/**
	 * 组件的属性列表
	 */
	props: {
		pageName: String,
		showNav: {
			type: Boolean,
			default: true
		},
		delta: {
			type: Number,
			default: 1
		},
		navbarData: {
			//navbarData   由父页面传递的数据，变量名字自命名
			type: Object,
			default: () => ({
				duration: 1000,
				//是否显示返回按钮
				showCapsule: 1,
				//导航栏 中间的标题
				title: '',
				//导航栏 是否显示标题
				showTitle: true,
				titleColor: '#fff',
				// 导航栏背景色
				bgColor: '',
				posit: 'relative',
				//返回按钮颜色
				backColor: '#222222',
				isOpacity: 1,
				gradual: false,
				//导航栏图片
				bgImg:true
			}),

		}
	},
	beforeMount() {
		this.navHeight = globalData.navHeight || 40;
		this.navTop = globalData.navTop || 20;
		this.imageWidth = uni.getSystemInfoSync().windowWidth;
	},
	/**
	 * 组件的方法列表
	 */
	methods: {
		//回退
		_navBack: function () {
			this.$emit('navBack')
			console.log('点击后推 ')
			let routes = getCurrentPages()
			//	#ifndef H5

			//	#endif
			let backHome = routes[routes.length - 1].options.scene || routes[routes.length - 1].options.share ? 1 : routes[routes.length - 1].options.backHome
			// this.$store.commit('SET_lOGIN', false);
			// 非H5程序。所有的分享。或者复制链接打开的页面，返回全部跳转首页
			if ((backHome && isH5) || ((backHome || (routes.length == 1)) && !isH5)) {
				console.log(routes.length, '555555555555555',routes)
				if(routes.length == 1 && routes[0].route == "packageUserCenter/pages/aigc/newYearDetail"){
					this.$navTo('/packageUserCenter/pages/aigc/aigcHome', {
					}, "redirectTo");
					return
				}
			
				uni.navigateTo({
					url: '/pages/index/index'
				});
			} else {
				//	#ifdef H5
				if (routes.length <= 1) {
					dsbridge.navigateBack()
				} else {
					uni.navigateBack({
						delta: this.delta
					});
				}
				//	#endif
				//	#ifndef H5
				uni.navigateBack({
					delta: this.delta
				});
				//	#endif
			}
		},

		// 计算图片高度
		imgLoaded(e) {
			this.imageHeight = e.detail.height * (uni.getSystemInfoSync().windowWidth / e.detail.width);
			uni.setStorageSync('imageHeight', e.detail.height * (uni.getSystemInfoSync().windowWidth / e.detail.width));
		},
		scroll(top) {
			if (top > 20) {
				this.isOpacity = 0
			} else {
				this.isOpacity = 1
			}
		}
	},
	watch: {
		navbarData: {
			handler: function (newVal, oldVal) {
				this.isOpacity = this.navbarData.isOpacity
				this.bgColor = this.navbarData.bgColor
				this.backColor = this.navbarData.backColor
			},
			immediate: true,
			deep: true
		}
	},
};
</script>
<style lang="scss" scoped>
.topBackground {
	width: 100%;
	position: absolute;
	top: 0;
	overflow: hidden;
	image{
		width: 100%;
	}
}

.topBackground {
	z-index: 2;
	width: 100%;
	position: absolute;
	top: 0;
	overflow: hidden;
	background-color: transparent;
	.background-image {
		width: 100%;
	}
}

.navbar {
	width: 100%;
	overflow: hidden;
	position: relative;
	top: 0;
	left: 0;
	z-index: 3;
	flex-shrink: 0;
}

.navbar.isOpacity {
	background: rgba(255, 255, 255, 0);
	position: fixed;
}

.navbar-back {
	position: absolute;
	left: 0;
	z-index: 10;
	bottom: -21rpx;
	color: #000000;
	z-index: 11;
	width: 116rpx;
	height: 118rpx;
	.back-img{
		width: 100%;
		height: 100%;
	}
}

.customContent-box {
	position: absolute;
	top: 0rpx;
	left: 87rpx;
	bottom: 0rpx;
	right: 190rpx;
	z-index: 10;
	/* display: flex; */
}

.isOpacity .navbar-title {
	color: #fff;
}

.navbar-title {
	width: 100%;
	box-sizing: border-box;
	padding-left: 115px;
	padding-right: 115px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	position: absolute;
	left: 0;
	z-index: 10;
	color: #1A1A1A;
	font-size: 34rpx;
	font-weight: 400;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.back_img{
	width: 60rpx !important;
	height: 60rpx !important;
	margin-left: 28rpx;
	margin-top: 50%;
	transform: translateY(-50%);
}
</style>
